<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			canvas {
				border: 1px solid gray;
			}
			
			.btn-row {
				width: 400px;
				display: flex;
				justify-content: space-around;
			}
		</style>
	</head>

	<body>
		<canvas width="400"
		 height="400"
		 id='my-canvas'></canvas>
		<div class="btn-row">
			<button id='up-btn'>up</button>
			<button id='down-btn'>down</button>
			<button id='left-btn'>left</button>
			<button id='right-btn'>right</button>
		</div>
	</body>
	<script>
		var canvas = document.getElementById('my-canvas')
		var CanvasWidth = 400 // 画布宽度
		var CanvasHeight = 400 // 画布高度
		var CanvasStep = 40 // 动作步长
		canvas.width = CanvasWidth
		canvas.height = CanvasHeight

		// 移动对象类
		var Role = function(x, y, imgSrc) {
			this.position = {
				x,
				y
			}
			this.canvas = document.getElementById('my-canvas')

			this.ctx = this.canvas.getContext('2d')
			this.img = new Image()
			this.img.style.width = CanvasStep
			this.img.style.height = CanvasStep
			this.img.src = imgSrc
			this.img.onload = () => {
				this.ctx.drawImage(this.img, x, y, CanvasStep, CanvasStep)
				this.move(0, 0)
			}
		}

		Role.prototype.move = function(x, y) {
			var pos = this.position
			this.ctx.clearRect(pos.x, pos.y, CanvasStep, CanvasStep)
			pos.x += x
			pos.y += y
			this.ctx.drawImage(this.img, pos.x, pos.y, CanvasStep, CanvasStep)
		}

		var mario = new Role(200, 200, 'https://i.loli.net/2019/08/09/sqnjmxSZBdPfNtb.jpg')

		// 设置按钮回调
		var elementUp = document.getElementById('up-btn')
		elementUp.onclick = function() {
			mario.move(0, -CanvasStep)
		}

		var elementDown = document.getElementById('down-btn')
		elementDown.onclick = function() {
			mario.move(0, CanvasStep)
		}

		var elementLeft = document.getElementById('left-btn')
		elementLeft.onclick = function() {
			mario.move(-CanvasStep, 0)
		}

		var elementRight = document.getElementById('right-btn')
		elementRight.onclick = function() {
			mario.move(CanvasStep, 0)
		}
		//如果要新建一个小怪兽角色，可以：
		var monster = new Role(160, 160, 'https://i.loli.net/2019/08/12/XCTzcdbhriLlskv.png')
	</script>

</html>